<template>
    <div class="container">
        <a-tabs class="setting-tab">
            <a-tab-pane key="list" tab="报修审核">
                <!-- 表格 -->
                <a-table :columns="columns" :dataSource="list" :pagination="{
                    current: page.currentPage,
                    pageSize: page.pageSize,
                    total: page.total,
                    onChange: changePage
                }">
                    <template #bodyCell="{ column, record }">
                        <a-space v-if="column.dataIndex === 'avatar'">
                            <img style="width:60px;heigth:60px" :src="record.student.avatar" :alt="record.student.stuName">
                        </a-space>
                        <a-space v-if="column.dataIndex === 'name'">
                            {{ record.student.stuName }}
                        </a-space>
                        <a-space v-if="column.dataIndex === 'createdAt'">
                            {{ dayjs(record.createdAt).format('YYYY-MM-DD') }}
                        </a-space>
                        <a-space v-if="column.dataIndex === 'status'">
                            <img v-if="record.process === 1" style="width:60px;heigth:60px" src="@/assets/passLogo.jpeg"
                                :alt="record.student.stuName">
                        </a-space>
                        <a-space v-if="column.dataIndex === 'operate'">
                            <!-- <a-button type="primary" v-if="record.process === 0" @click="passedForRepair(record.id)">
                                <template #icon>
                                    <CheckOutlined />
                                </template>
                                允许申请
                            </a-button> -->
                            <a-tag class="btnTag" color="#87d068" @click="passedForRepair(record.id)">审核通过</a-tag>
                            <a-tag class="btnTag" color="#f50" @click="notPassedForRepair(record.id)">取消通过</a-tag>
                        </a-space>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script setup lang='ts'>
import dayjs from 'dayjs'
import type { IPage } from '@/types/table'
import { message } from 'ant-design-vue'
import type { Repair } from '@/types/repairs'

const columns = [
    {
        title: '序号',
        customRender(obj: any) {
            // 要和当前的分页数据进行集合
            // 1 -> 1
            // 2 -> (页码 -1） * 每页条数 + 1
            return (page.currentPage - 1) * page.pageSize + obj.index + 1
        }
    },
    { title: '报修项目', dataIndex: 'content' },
    { title: '宿舍号', dataIndex: 'RoomNo' },
    { title: '图片', dataIndex: 'avatar' },
    { title: '姓名', dataIndex: 'name' },
    { title: '报修时间', dataIndex: 'createdAt' },
    { title: '状态', dataIndex: 'status' },
    { title: '操作', dataIndex: 'operate' }
]


const list = ref<Repair[]>([])

const page = reactive<IPage>({
    currentPage: 1,
    pageSize: 5,
    total: 0
})

/** 获取报修申请列表 */
const getList = async (data: IPage) => {
    const close = message.loading('数据正在加载中...')
    const res = await getRepairsList(data)
    list.value = res.data.repairs
    page.total = res.data.total
    close()
}
onMounted(() => {
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
})

const changePage = (c: number, p: number) => {
    page.currentPage = c,
        page.pageSize = p
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
}

// 允许申请按钮
const passedForRepair = async (id: number) => {
    const res = await isPassedForRepair(id)
    if (res.code !== 201) return message.error('操作失败')
    message.success('申请通过')
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
}

const notPassedForRepair = async (id: number) => {
    const res = await isNotPassedForRepair(id)
    if (res.code !== 201) return message.error('操作失败')
    message.success('取消通过')
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
}

</script>

<style lang="less" scoped>
.container {
    padding: 16px;

    .setting-tab {
        background-color: #fff;
        padding: 16px;
        height: 100%;

        .pagination {
            margin-top: 20px;
        }
    }

    .btnTag:hover {
        cursor: pointer;
    }
}
</style>